<template>
  <div class="DailyFrase">
    <div class="homeModule-title">
      <p>每日金句</p>
      <div @click="GoDailySentenceView">
        <p>更多</p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div
      class="DailyFrase-content"
      :style="{ background: DailyFrase.card_color }"
    >
      <p>"</p>
      <p>{{ DailyFrase.desc }}</p>
      <p>—— {{ DailyFrase.content_author }}</p>
      <p>{{ DailyFrase.content_title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "DailyFrase",
  props: ["DailyFrase"],
  methods: {
    GoDailySentenceView() {
      this.$router.push("/DailySentenceView");
    },
  },
};
</script>

<style lang="scss" scoped>
.DailyFrase {
  margin: 0.625rem 0;
  .DailyFrase-content {
    height: 8.75rem;
    padding: 0.625rem;
    box-sizing: border-box;
    position: relative;
    p:nth-child(1) {
      font-size: 28px;
      color: #c5c6c7;
    }
    p:nth-child(2) {
      line-height: 1.25rem;
      font-size: 0.8125rem;
      margin: 0 0.625rem 0.25rem;
    }
    p:nth-child(3),
    p:nth-child(4) {
      font-size: 0.8125rem;
      position: absolute;
    }
    p:nth-child(3) {
      top: 5rem;
      right: 0.875rem;
    }
    p:nth-child(4) {
      top: 6.25rem;
      right: 0.875rem;
      color: var(--fontcolor);
    }
  }
}
</style>